<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@include file="../common/header.jsp"%>
<div class="easyui-layout" data-options="fit:true">
    <!-- Begin of toolbar -->
    <div id="wu-toolbar">
        <div class="wu-toolbar-button">
            <%@include file="../common/menus.jsp"%>
        </div>
        <div class="wu-toolbar-search">
            <label>用户名:</label><input id="search-name" class="wu-text" style="width:100px">
            <a href="#" id="search-btn" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
        </div>
    </div>
    <!-- End of toolbar -->
    <table id="data-datagrid" class="easyui-datagrid" toolbar="#wu-toolbar"></table>
</div>
<!-- Begin of easyui-dialog -->
<div id="add-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:460px; padding:10px;">
	<form id="add-form" method="post">
        <table>
            <tr>
                <td width="70" align="right">图像预览:</td>
                <td valign="middle">
                	<img id="preview-photo" style="float:left;" src="../../resources/home/Products/11.jpg" width="100px" height="90px">
                	<a style="float:left;margin-top:40px;" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-upload" onclick="uploadPhoto()" plain="true">上传图片</a>
                </td>
            </tr>
            <tr>
                <td width="70" align="right">图像:</td>
                <td><input type="text" id="add-photo" name="photo" value="../../resources/home/Products/11.jpg" readonly="readonly" class="wu-text " /></td>
            </tr>
            <tr>
                <td width="70" align="right">商品名称:</td>
                <td><input type="text" name="name"  onkeyup="CountWords(this,'show')" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写商品名称'" />&nbsp;&nbsp;字数：<span id="show">0</span><span>/<font color="red">16</font></span></td>
            </tr>
             <tr>
                <td width="70" align="right">商品简介:</td>
                <td><input type="text" name="info" onkeyup="CountWords(this,'show2')" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写商品简介'" />&nbsp;&nbsp;字数：<span id="show2">0</span><span>/<font color="red">16</font></span></td>
            </tr>
             <tr>
                <td width="70" align="right">商品新价:</td>
                <td><input type="text" name="new_price" class="wu-text easyui-numberbox easyui-validatebox" data-options="required:true,min:1,precision:1, missingMessage:'请填写商品新家'" /></td>
            </tr>
             <tr>
                <td width="70" align="right">商品原价:</td>
                <td><input type="text" name="pre_price" class="wu-text easyui-numberbox easyui-validatebox" data-options="required:true,min:1,precision:1, missingMessage:'请填写商品原价'" /></td>
            </tr>
            <tr>
                <td width="70" align="right">商品路径:</td>
                <td><input type="text" name="href" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写商品路径'" /></td>
            </tr>
            <tr>
                <td width="70" align="right">商品库存/个:</td>
                <td>
                	<input type="text" name="stock" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写商品库存'" />
                </td>
            </tr>
             <tr>
                <td width="70" align="right">商品重量/g:</td>
                 <td><input type="text" name="weight" class="wu-text easyui-numberbox easyui-validatebox" data-options="required:true,min:1,precision:1, missingMessage:'请填写商品重量'" /></td>
            </tr>
             <tr>
                <td width="70" align="right">评论量/条:</td>
                <td>
                	<input type="text" name="commentNumber" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写评论量'" />
                </td>
            </tr>
             <tr>
                <td width="70" align="right">销售量/个:</td>
                <td>
                	<input type="text" name="saleNumber" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写销售量'" />
                </td>
            </tr>
            <tr>
                <td width="70" align="right">所属种类:</td>
                <td>
                	<select name="categoryId" class="easyui-combobox" panelHeight="auto" style="width:268px">
                		<c:forEach items="${teaCategoryList}" var="teaCategory">
							<option value="${teaCategory.id}">${teaCategory.name}</option>
						</c:forEach>
		            </select>
                </td>
            </tr>
            <tr>
                <td width="70" align="right">所属活动:</td>
                <td>
                	<select name="actionId" class="easyui-combobox" panelHeight="auto" style="width:268px">
		                <c:forEach items="${actionList}" var="action">
							<option value="${action.id}">${action.name}</option>
						</c:forEach>
		            </select>
                </td>
            </tr>
           
        </table>
    </form>
</div>
<!-- 修改窗口 -->
<div id="edit-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:460px; padding:10px;">
	<form id="edit-form" method="post">
        <input type="hidden" name="id" id="edit-id">
        <table>
            <tr>
                <td width="60" align="right">图像预览:</td>
                <td valign="middle">
                	<img id="edit-preview-photo" style="float:left;" src="../../resources/home/Products/11.jpg" width="100px" height="90px">
                	<a style="float:left;margin-top:40px;" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-upload" onclick="uploadPhoto()" plain="true">上传图片</a>
                </td>
            </tr>
            <tr>
                <td width="60" align="right">图像:</td>
                <td><input type="text" id="edit-photo" name="photo" value="../../resources/home/Products/11.jpg" readonly="readonly" class="wu-text " /></td>
            </tr>
           <tr>
                <td width="70" align="right">商品名称:</td>
                <td><input type="text" name="name" id="edit-name"  onkeyup="CountWords(this,'show3')" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写商品名称'" />&nbsp;&nbsp;字数：<span id="show3">0</span><span>/<font color="red">16</font></span></td>
            </tr>
             <tr>
                <td width="70" align="right">商品简介:</td>
                <td><input type="text" name="info" id="edit-info" onkeyup="CountWords(this,'show4')" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写商品简介'" />&nbsp;&nbsp;字数：<span id="show4">0</span><span>/<font color="red">16</font></span></td>
            </tr>
             <tr>
                <td width="70" align="right">商品新价:</td>
                <td><input type="text" name="new_price" id="edit-new_price" class="wu-text easyui-numberbox easyui-validatebox" data-options="required:true,min:1,precision:1, missingMessage:'请填写商品新家'" /></td>
            </tr>
             <tr>
                <td width="70" align="right">商品原价:</td>
                <td><input type="text" name="pre_price" id="edit-pre_price" class="wu-text easyui-numberbox easyui-validatebox" data-options="required:true,min:1,precision:1, missingMessage:'请填写商品原价'" /></td>
            </tr>
            <tr>
                <td width="70" align="right">商品路径:</td>
                <td><input type="text" name="href" id="edit-href" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写商品路径'" /></td>
            </tr>
            <tr>
                <td width="70" align="right">商品库存/个:</td>
                <td>
                	<input type="text" name="stock" id="edit-stock" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写商品库存'" />
                </td>
            </tr>
             <tr>
                <td width="70" align="right">商品重量/g:</td>
                 <td><input type="text" name="weight" id="edit-weight" class="wu-text easyui-numberbox easyui-validatebox" data-options="required:true,min:1,precision:1, missingMessage:'请填写商品重量'" /></td>
            </tr>
             <tr>
                <td width="70" align="right">评论量/条:</td>
                <td>
                	<input type="text" name="commentNumber" id="edit-commentNumber" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写评论量'" />
                </td>
            </tr>
             <tr>
                <td width="70" align="right">销售量/个:</td>
                <td>
                	<input type="text" name="saleNumber" id="edit-saleNumber" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写销售量'" />
                </td>
            </tr>
            <tr>
                <td width="70" align="right">所属种类:</td>
                <td>
                	<select name="categoryId" id="edit-categoryId" class="easyui-combobox" panelHeight="auto" style="width:268px">
                		<c:forEach items="${teaCategoryList}" var="teaCategory">
							<option value="${teaCategory.id}">${teaCategory.name}</option>
						</c:forEach>
		            </select>
                </td>
            </tr>
            <tr>
                <td width="70" align="right">所属活动:</td>
                <td>
                	<select name="actionId" id="edit-actionId" class="easyui-combobox" panelHeight="auto" style="width:268px">
		                <c:forEach items="${actionList}" var="action">
							<option value="${action.id}">${action.name}</option>
						</c:forEach>
		            </select>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="process-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-upload',title:'正在上传图片'" style="width:450px; padding:10px;">
<div id="p" class="easyui-progressbar" style="width:400px;" data-options="text:'正在上传中...'"></div>
</div>
<input type="file" id="photo-file" style="display:none;" onchange="upload()">
<%@include file="../common/footer.jsp"%>

<!-- End of easyui-dialog -->
<script type="text/javascript">

//商品名称计数
var charCount;
function CountWords(obj, show_id){ 
 
 var fullStr = obj.value; 
 charCount = fullStr.length;

 var rExp = /[^A-Za-z0-9]/gi; 
 var spacesStr = fullStr.replace(rExp, ' '); 
 var cleanedStr = spacesStr + ' '; 
 do{ 
  var old_str = cleanedStr; 
  cleanedStrcleanedStr = cleanedStr.replace(' ', ' '); 
 }while( old_str != cleanedStr ); 
  var splitString = cleanedStr.split(' '); 
  document.getElementById(show_id).innerHTML=charCount; 
} 






	//上传图片
	function start(){
			var value = $('#p').progressbar('getValue');
			if (value < 100){
				value += Math.floor(Math.random() * 10);
				$('#p').progressbar('setValue', value);
			}else{
				$('#p').progressbar('setValue',0)
			}
	};
	function upload(){
		if($("#photo-file").val() == '')return;
		var formData = new FormData();
		formData.append('photo',document.getElementById('photo-file').files[0]);
		$("#process-dialog").dialog('open');
		var interval = setInterval(start,200);
		$.ajax({
			url:'upload_photo',
			type:'post',
			data:formData,
			contentType:false,
			processData:false,
			success:function(data){
				clearInterval(interval);
				$("#process-dialog").dialog('close');
				if(data.type == 'success'){
					$("#preview-photo").attr('src',data.filepath);
					$("#add-photo").val(data.filepath);
					$("#edit-preview-photo").attr('src',data.filepath);
					$("#edit-photo").val(data.filepath);
				}else{
					$.messager.alert("消息提醒",data.msg,"warning");
				}
			},
			error:function(data){
				clearInterval(interval);
				$("#process-dialog").dialog('close');
				$.messager.alert("消息提醒","上传失败!","warning");
			}
		});
	}
	
	function uploadPhoto(){
		$("#photo-file").click();
		
	}
	
	
	/**
	*  添加记录
	*/
	function add(){
		
		var nameCount = document.getElementById('show').innerHTML
		if(nameCount>16)
		{
			$.messager.alert('信息提示',"商品名称字数不能大于16个！",'warning');
			return;
		}
		var infoCount = document.getElementById('show2').innerHTML
		if(infoCount>16)
		{
			$.messager.alert('信息提示',"商品简介字数不能大于16个！",'warning');
			return;
		}
		
		var validate = $("#add-form").form("validate");
		if(!validate){
			$.messager.alert("消息提醒","请检查你输入的数据!","warning");
			return;
		}
		var data = $("#add-form").serialize();
		$.ajax({
			url:'add',
			dataType:'json',
			type:'post',
			data:data,
			success:function(data){
				$("#data-datagrid").datagrid('clearSelections');
				if(data.type == 'success'){
					$.messager.alert('信息提示','添加成功！','info');
					$('#add-dialog').dialog('close');
					$('#data-datagrid').datagrid('reload');
				}else{
					$.messager.alert('信息提示',data.msg,'warning');
				}
			}
		}); 
	}
	
	/**
	* Name 修改记录
	*/
	function edit(){
		
		var nameCount = document.getElementById('show3').innerHTML
		if(nameCount>16)
		{
			$.messager.alert('信息提示',"商品名称字数不能大于16个！",'warning');
			return;
		}
		var infoCount = document.getElementById('show4').innerHTML
		if(infoCount>16)
		{
			$.messager.alert('信息提示',"商品简介字数不能大于16个！",'warning');
			return;
		}
		
		
		
		var data = $("#edit-form").serialize();
		$.ajax({
			url:'edit',
			dataType:'json',
			type:'post',
			data:data,
			success:function(data){
				$("#data-datagrid").datagrid('clearSelections');
				if(data.type == 'success'){
					$.messager.alert('信息提示','修改成功！','info');
					$('#edit-dialog').dialog('close');
					$('#data-datagrid').datagrid('reload');
				}else{
					$.messager.alert('信息提示',data.msg,'warning');
				}
			}
		});
	}
	
	/**
	* 删除记录
	*/
	function remove(){
		$.messager.confirm('信息提示','确定要删除该记录？', function(result){
			if(result){
				var item = $('#data-datagrid').datagrid('getSelections');
				if(item == null || item.length == 0){
					$.messager.alert('信息提示','请选择要删除的数据！','info');
					return;
				}
				var ids = '';
				for(var i=0;i<item.length;i++){
					ids += item[i].id + ',';
				}
				$.ajax({
					url:'delete',
					dataType:'json',
					type:'post',
					data:{ids:ids},
					success:function(data){
						$("#data-datagrid").datagrid('clearSelections');
						if(data.type == 'success'){
							$.messager.alert('信息提示','删除成功！','info');
							$('#data-datagrid').datagrid('reload');
						}else{
							$.messager.alert('信息提示',data.msg,'warning');
						}
					}
				});
			}	
		});
	}
	
	/**
	* Name 打开添加窗口
	*/
	function openAdd(){
		//$('#add-form').form('clear');
		$('#add-dialog').dialog({
			closed: false,
			modal:true,
            title: "添加用户信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: add
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#add-dialog').dialog('close');                    
                }
            }],
            onBeforeOpen:function(){
            	//$("#add-form input").val('');
            }
        });
	}
	
	/**
	* 打开修改窗口
	*/
	function openEdit(){
		//$('#edit-form').form('clear');
		var item = $('#data-datagrid').datagrid('getSelections');
		if(item == null || item.length == 0){
			$.messager.alert('信息提示','请选择要修改的数据！','info');
			return;
		}
		if(item.length > 1){
			$.messager.alert('信息提示','请选择一条数据进行修改！','info');
			return;
		}
		item = item[0];
		$('#edit-dialog').dialog({
			closed: false,
			modal:true,
            title: "修改用户信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: edit
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#edit-dialog').dialog('close');                    
                }
            }],
            onBeforeOpen:function(){
            	$("#edit-id").val(item.id);
            	$("#edit-preview-photo").attr('src',item.photo);
				$("#edit-photo").val(item.photo);
            	$("#edit-name").val(item.name);
            	$("#edit-info").val(item.info);
            	$("#edit-href").val(item.href);
            	$('#edit-new_price').numberbox('setValue',item.new_price);
            	$('#edit-pre_price').numberbox('setValue',item.pre_price);
            	$("#edit-stock").val(item.stock);
            	$('#edit-weight').numberbox('setValue',item.weight);
            	$("#edit-commentNumber").val(item.commentNumber);
            	$("#edit-saleNumber").val(item.saleNumber);
            	$("#edit-categoryId").combobox('setValue',item.categoryId);
            	$("#edit-actionId").combobox('setValue',item.actionId);
            	
            }
        });
	}	
	
	
	//搜索按钮监听
	$("#search-btn").click(function(){
		
		var option = {productname:$("#search-name").val()};
		
		$('#data-datagrid').datagrid('reload',option);
	});
	
	
	//使field能够点接
	function formatterPoint(value, rec, index){

		var field = this.field;

		var rs = eval("rec['"+field.replace(/\./g,"']['")+"']");  
		 
		var sub_rs = rs.substring(rs.length-4,rs.length)
	
		 
		if(".jpg" == sub_rs  || ".jpeg" == sub_rs || ".png" == sub_rs || ".gif" == sub_rs)
		{
			var img = '<img src="'+rs+'" width="50px" height="50px"/>';
			return img;
		}else{
			
			return rs;
		}
	}
	
	/** 
	* 载入数据
	*/
	$('#data-datagrid').datagrid({
		url:'list',
		rownumbers:true,
		singleSelect:false,
		pageSize:20,           
		pagination:true,
		multiSort:true,
		fitColumns:true,
		idField:'id',
		fit:true,
		columns:[[
			{ field:'chk',checkbox:true},
			{ field:'photo',title:'商品图片',width:60,align:'center',formatter:function(value,row,index){
				var img = '<img src="'+value+'" width="50px" height="50px"/>';
				return img;
			}},
			{ field:'name',title:'商品名称',width:150,align:'center'},
			{ field:'info',title:'商品简介',width:150,align:'center'},
			{ field:'href',title:'商品路径',width:180,align:'center'},
			{ field:'new_price',title:'商品新价',width:50,align:'center'},
			{ field:'pre_price',title:'商品原价',width:50,align:'center'},
			{ field:'stock',title:'商品库存/个',width:60,align:'center'},
			{ field:'weight',title:'商品重量/g',align:'center',width:60},
			{ field:'commentNumber',title:'评论量/条',align:'center',width:50},
			{ field:'saleNumber',title:'销售量/个',align:'center',width:50},
			{ field:'teaCategory.name',title:'所属种类',align:'center',width:60,formatter:formatterPoint},
			{ field:'action.name',title:'所属活动',align:'center',width:60,formatter:formatterPoint}
		]]
	});
</script>